<template>
  <uni-popup
    ref="popup"
    :animation="false"
    :is-mask-click="true"
    @change="change"
  >
    <view class="">
      <view class="close" @click="close">
        <i class="uni-btn-icon"></i>
      </view>
      <movable-area class="coImage">
        <movable-view
          class="coImage"
          :scale="true"
          direction="all"
          :out-of-bounds="true"
        >
          <image
            :src="imagePreviewExample"
            mode="aspectFit"
            class="imageCon"
          ></image></movable-view></movable-area
    ></view>
  </uni-popup>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  props: ["imagePreviewExample"],
  data() {
    return { show: false };
  },
  methods: {
    change(e) {
      this.show = e.show;
    },
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    }
  }
});
</script>

<style scoped>
.close {
  width: 100%;
  font-size: 40rpx;
  font-weight: 400;
  color: #ffffff;
  text-align: right;
}
.close > i {
  padding-right: 29rpx;
}
.coImage {
  width: 100%;
  height: 800rpx;
}
.imageCon {
  width: 100%;
  height: 100%;
}
</style>
